#background{
    position: absolute;
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
}

.banner{
    background: transparent;
    // height: 60em;
    overflow: hidden;
    margin-bottom: 15em;


    .box{
        width: 100%;
        text-align: center;
        padding-top: 10em;

        .title{
            font-family: OSLight;
            font-size: 4em;
            text-transform: uppercase;
            color: #999999;
            
            span{
                font-family: OSBold;
                color: #fcac45;
            }              
        }

        .desc{
            font-family: OSLight;
            color: #999999;
            font-size: 2em;
            text-transform: capitalize;
            margin-bottom: 8em;

            span{
                font-family: OSBold;
                color: #c3c3c3;
            }
        }

        .more{

            a{
                width: 3em;
                height: 3em;
                border-radius: 50%;
                border: 2px solid #c3c3c3;
                color: #c3c3c3;
                font-size: 1em;
                text-align: center;
                line-height: 3em;
                text-decoration: none;
                transition: all .1s linear;

                &:hover{
                    box-shadow: 0 0 5px #c3c3c3;
                    transform: translateY(-5px);
                }
            } 
        }

        @media screen and (max-width:768px) {

            .title{
                font-size: 2.2em;
                margin-bottom: .5em;
            }
            .desc{
                font-size: 1.2em;
                margin-bottom: 15vh;
            }
        }
    }

}
// about
.about{
    width: 100%;
    height: 40em;
    background: #fff;
    padding-top: 7em;  
  
    .left{
      width: 50%;
      float: left;
    }
  
    .right{
      width: 50%;
      float: left;
  
      .short{
        font-size: 1em;
        color: #636363;
      }
      .title{
        font-size: 1.5em;
        color: #222222;
        span:nth-child(1){
          display: inline-block;
          padding-bottom: .2em;
          border-bottom: 4px solid #fcac45;
        }
        span:nth-child(2){
          font-family: OSBold;
        }
      }
  
      .content{
        font-size: 1em;
        margin-top: 2em;
        margin-bottom: 2.5em;
      }
      
      .videolist{
        font-size: 1em;
  
        li{
          span:nth-child(2){
            font-family: OSBold;
          }
    
          span:nth-child(3){
            font-family: OSLtalic;
          }
        }
      }
  
      .btn{
        display: flex;
        width: 12em;
        height: 3em;
        margin-top: 2em;
        align-items: center;
        justify-content: space-around;
  
        a{
          color: #636363;
          text-decoration: none;
        }
      }
    }
  
    @media screen and (max-width:768px){
      .left{
        img{
          display: none;
        }
      }
  
      .right{
        width: 100%;
      }
    }
  }
//   团队信息
.teaminfo{
    background: #070707;
    width: 100%;
    height: 100%;
    position: sticky;
    color: #fff;
    padding-top: 4em;
  
    .title{
      font-size: 2.7em;
      text-align:center;
      font-family:OSLight ;
      background: url(../images/heng.png) no-repeat center bottom;
      line-height: 2.7em;
      margin-bottom: 2em;
      
      span:nth-child(1){
        font-family: OSBold;
      }
  
      span:nth-child(2){
        font-family: OSBold;
      }
    }

    .point{
        width: 1em;
        height: 1em;
        border-radius: 0em;
        border: 0em;
        background: #ffffff;
        margin: 1px .6em 1px .6em;
    }

    .slide{
        .pond{                
            .active{
                background: #fcac45;
                // margin: 1px;
                }
            }

        .carousel-indicators{
            bottom: -6em;
        }
    }

    .more{
        width: 100%;
        height: 8em;
        background-color: #070707;
    }

    

    .teamlist{
        display: flex;
        justify-content: space-around;

        .profile{
            background:brown;
            width: 10em;
            height: 10em;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto;
            margin-bottom: 1em;
        }

        .content{
            text-align: center;

            .name{
            font-size: 1.5em;
            font-family: OSBold;
            }
            .post{
                font-size: 1.2em;
                font-family: OSLight;
                margin-bottom: 2em;
            }

        }
    }

    @media screen and (max-width:768px){
        .teamlist{
            display: block;
            width: 100%;

            li{
                display: flex;
                justify-content: center;

                .profile{
                    flex-shrink: 0;
                    border-radius: 0em;
                    margin-right: 2em;
                }

                .content{
                    display: flex;
                    flex-direction: column;
                    justify-content: start;
                    margin: 0;
                    text-align: left;

                    .post{
                        margin-bottom: 1em;
                    }

                    .motto{
                      height: 4em;
                      overflow-y: scroll;
                    }
                }
            }
        }
    }
  }
// 服务介绍
.services{
  background-color: #fff;
  width: 100%;
  height: 100%;
  padding: 4em 0 4em 0;
  .container{

    .title{
      font-size: 3em;
      color: #222222;
      font-family: OSLight;
      background: url(../images/heng.png) no-repeat center bottom;
      line-height: 3em;
      text-align: center;
      margin-bottom: 1em;

      span{
        font-family: OSBlod;
      }
    }

    .introduction{
      color: #6c6c6c;
      font-size: 1em;
      text-align: center;
      line-height: 1em;
      margin-bottom: 4em;
    }

    .infolist{
      display: flex;
      justify-content: center;

      li{
        margin: 1.5em;
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon{
          border: .5em solid #fcac45;
          border-radius: 50%;
          overflow: hidden;
          margin-bottom: 1.5em;
        }

        .service{
          text-align: center;
          color: #222222;
          font-size: 1.2em;
          font-family: OSBlod;
          margin-bottom: 1.5em;
        }

        .info{
          color: #222222;
          font-size: .8em;
        }
      }
    }
  }

  @media screen and (max-width:768px){
    .container{
      .title{
        font-size: 1.5em;
        line-height: 3.5em;
      }

      .introduction{
        font-size: .8em;
      }


      .infolist{
        display: block;

        li{
          flex-direction: row;
          align-items: flex-start;

          .icon{
            flex-shrink:1;
            margin-right: 2em;
          }

          .liright{
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .service{
              margin-bottom: .5em;
            }

            .info{
              overflow-y: scroll;
              height: 3em;
            }
          }
        }
      }
    }
    
  }
}
//合作品牌
.clients{
  
  background: #070707;
  .container{
    width: 70%;
    height: 100%;
    position: sticky;
    color: #fff;
    padding-top: 4em;
  
    .title{
      font-size: 2.7em;
      text-align:center;
      font-family:OSLight ;
      background: url(../images/heng.png) no-repeat center bottom;
      line-height: 2.7em;
      margin-bottom: 5em;
      
      span:nth-child(1){
        font-family: OSBold;
      }
  
      span:nth-child(2){
        font-family: OSBold;
      }
    }

    .slide{
      .carousel-indicators{
        bottom: -10em;
        .point{
          width: 1em;
          height: 1em;
          background: #fff;
          border-radius: 0em;
          border: 0em;
          margin: 1px .6em 1px .6em;
        }
        .active{
          background: #fcac45;
          // margin: 1px;
          }
      }
      


      .carousel-inner{
        .listclients{
          display: flex;
          justify-content: space-around;
        }
      }
    }
  }


.more{
    width: 100%;
    height: 15em;
    background-color: #070707;
}



  @media screen and (max-width:768px){
    .container{
      .title{
        font-size: 1.5em;
        line-height: 4em;
        margin-bottom: 3em;
      }


      .slide{
        .carousel-inner{
          .listclients{
            flex-direction: column;
            align-items: center;
            li{
              margin-bottom: 2.5em;
            }
          }
        }
      }
    }
    
  }
}

.ourwork{
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 4em 0 4em 0;

  .container{
    .title{      
        font-size: 3em;
        color: #222222;
        font-family: OSLight;
        background: url(../images/heng.png) no-repeat center bottom;
        line-height: 3em;
        text-align: center;
        margin-bottom: 1em;
        text-transform:uppercase;
  
        span{
          font-family: OSBold;
        }      
    }

    .info{
      color: #6c6c6c;
      font-size: 1em;
      text-align: center;
      line-height: 1em;
      margin-bottom: 4em;
      font-family: OSLtalic;
    }

    .work{
      .top{
        display: flex;
        justify-content: space-between;
        margin-bottom: 3em;
        .left{
          color: #222222;
          font-size: 1em;
          font-weight: bold;
          font-family: OSBlod;
          text-transform:uppercase;
        }

        .right{
          .pc-right{
            font-size: 1em;
            display: flex;
            justify-content: space-around;
            a{
              display: inline-block;
              text-transform: capitalize;
              color: #6c6c6c;
              padding:0em 1em;
              border-right: 1px solid #999999;
              text-decoration: none;
              &:last-child{
                border-right: 0px;
              }  
            }
            a:active{
              font-family: OSBold;
              color: #222222;
            }
          }
          
          .mobile-right{
            display: none;
          }
        }
      }

      .list{
        ul{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;

          .imglist{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 25%;
            flex-shrink: 0;
            margin-bottom: 1.5em;
            overflow: hidden;
            cursor: pointer;

            .images{
              position: relative;
              display: inline-block;

              img:nth-child(1){
                overflow: hidden;
              }

              &:hover .moreinfo{
                display: block;
                animation: moreinfo .2s linear forwards;
              }

              @keyframes moreinfo {
                0%{
                  transform: translateY(100%);
                }
                100%{
                  transform: translateY(0);
                }
              }

              .moreinfo{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, .9);
                display: none;
                z-index: 2;
                padding-top: 5em;


                .name{
                  margin: 0 auto;
                  text-align: center;
                  color: #fff;
                  font-size: 1.5em;
                }

                .author{
                  margin: 0 auto;
                  text-align: center;
                  color: #6c6c6c;
                  font-size: 1em;
                  margin-bottom: 2em;
                }

                img{
                  display: block;
                  margin: 0 auto;
                }
              }
              }
            }
          }
        }
      }
    }
    @media screen and (max-width:768px){
      .container{
        .title{
          font-size: 1.5em;
          line-height: 4em;
          margin-bottom: 2em;
        }
  
        .info{
          font-size: 1em;
          height: 3em;
          overflow-y: scroll;
        }
  
        .work{
          .top{
            .right{
              .pc-right{
                display: none;
              }
              .mobile-right{
                display: block;
              }
            }
          }
          .list{
            ul{
              .imglist{
                width: 45%;

                .images{
                  .moreinfo{
                    padding: 1em;
                    .name{
                      font-size: 1.2em;
                    }
                    .author{
                      margin-bottom: 1em;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
}

.testimonials{
  background: #070707;
  .container{
    width: 80%;
    height: 100%;
    position: sticky;
    color: #fff;
    padding-top: 4em;
  
    .title{
      font-size: 3em;
      text-align:center;
      text-transform: uppercase;
      font-family:OSLight ;
      background: url(../images/heng.png) no-repeat center bottom;
      line-height: 3em;
      margin-bottom: 3em;
      
      span:nth-child(1){
        font-family: OSBold;
      }
  
      span:nth-child(2){
        font-family: OSBold;
      }
    }

    .slide{
      .carousel-indicators{
        bottom: -10em;
        .point{
          width: 1em;
          height: 1em;
          background: #fff;
          border-radius: 0em;
          border: 0em;
          margin: 1px .6em 1px .6em;
        }
        .active{
          background: #fcac45;
          // margin: 1px;
        }
      }

      .carousel-inner{
        .item{
          .infom{
            .info{
              text-transform: uppercase;
              color: #e8e8e8;
              font-family: OSBold;
              font-size: 1em;
              text-align: center;
              margin-bottom: 3em;
            }

            .author{
              text-align: center;
              font-size: 1em;
              color: #b2b2b2;
              font-family: OSLight;
              span{
                font-family: OSBold;
              }
            }
          }
        }
      }
    }
  }


.more{
    width: 100%;
    height: 15em;
    background-color: #070707;
}



  @media screen and (max-width:768px){
    .container{
      .title{
        font-size: 1.3em;
        line-height: 4em;
        margin-bottom: 3em;
      }
    }
    
  }
}

.contactus{
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 4em 0 4em 0;
  .container{
    width: 80%;
    .title{
      font-size: 3em;
      color: #222222;
      font-family: OSLight;
      background: url(../images/heng.png) no-repeat center bottom;
      line-height: 3em;
      text-align: center;
      margin-bottom: 1em;
      text-transform:uppercase;

      span{
        font-family: OSBold;
      }
    }

    .info{
      color: #6c6c6c;
      font-size: 1em;
      text-align: center;
      line-height: 1em;
      margin-bottom: 4em;
      font-family: OSLtalic;
    }

    .contact{
      .userinfo{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 3em;
        .name,.email{
          width: 45%;
        }


        .top{
          span{
            color: #636363;
          }
          sup{
            color: #db0000;
          }
        }

        .bottom{          
          input{
            height: 2em;
            line-height: 2em;
            font-size: 1.2em;
            width: 100%;
            border: 1px solid #a5a5a5;
            border-radius: 1px;
          }
        }
      }

      .message{
        width: 100%;
        margin-bottom: 2em;
        .top{          
          span{
            color: #636363;
          }
          sup{
            color: #db0000;
          }
        }

        .bottom{
          textarea{
            width: 100%;
            border: 1px solid #a5a5a5;
            border-radius: 1px;
          }
        }
      }

      .send{
        display: flex;
        justify-content: flex-end;
        button{
          height: 3em;
          width: 10em;
          font-size: 1em;
          color: #fff;
          background: #fcac45;
          border: 0;
        }
      }
    }
  }
  @media screen and (max-width:768px){
    .container{
      .title{
      font-size: 1.5em;
      line-height: 4em;
    }

    .info{
      font-size: .8em;
      overflow-y: scroll;
    }
    
    .contact{
      .userinfo{
        margin-bottom: 1em;
        .name,.email{
          width: 100%;
          margin-bottom: 1em;
        }
      }

      .send{
        justify-content: center;
      }
    }
    }
  }
}
